<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="height: 100%;padding: 0;margin: 0;" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <title>用户管理</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/demo/demo.css}"/>
    <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>
</head>
<body style="height: 100%;width: 100%;padding: 0;margin: 0;">
<table id="tt" title="用户列表" style="width:100%;height:100%;"
       data-options="toolbar:toolbar,rownumbers:true,singleSelect:true,pagination:true,url:'/sys/user/list',method:'post'">
    <thead>
    <tr>
        <th field="id" checkbox="true"></th>
        <th field="username" width="20%">账号名称</th>
        <th field="sex" width="19%" formatter="formatSex">性别</th>
        <th field="age" width="20%">年龄</th>
        <th field="realName" width="20%">真实姓名</th>
        <th field="enable" width="20%" formatter="formatEnable">是否有效</th>
    </tr>
    </thead>
</table>


<script type="text/javascript">
    function formatSex(value) {
        if (value == 1) {
            return '男';
        } else {
            return '女';
        }
    }
    function formatEnable(value) {
        if (value == 1) {
            return '有效';
        } else {
            return '无效';
        }
    }

    $(function () {
        var pager = $('#tt').datagrid().datagrid('getPager');
    })
    var toolbar = [];
</script>

<script sec:authorize="hasRole('SYS_USER_ADD')">
    toolbar.push('-',{
        text: '新增',
        iconCls: 'icon-add',
        handler: function () {
            $("#addUsernameId").textbox("setValue", '');
            $("#addAgeId").textbox("setValue", '');
            $("#addRealNameId").textbox("setValue", '');
            $('#addSexId').combobox("select", '1');
            $('#addDialog').dialog('open');
        }
    });
</script>

<script sec:authorize="hasRole('SYS_USER_ROLE_UPDATE')">
    toolbar.push('-',{
        text: '分配角色',
        iconCls: 'icon-add',
        handler: function () {
            var row = $('#tt').treegrid('getSelected');
            if (row) {
                var userId = row.id;
                $("#hiddenUserUpdateId").val(userId);
                $.post("/sys/user/selectRolesByUserId", {userId: userId}, function (result) {
                    $('#userRoleSelect').combobox('setValues', result);
                    $('#roleUpdateDialog').dialog('open');
                });
            } else {
                $.messager.alert("提示", "请先选择需要分配角色的用户");
            }

        }
    });
</script>

<script sec:authorize="hasRole('SYS_USER_UPDATE')">
    toolbar.push('-',{
        text: '修改',
        iconCls: 'icon-save',
        handler: function () {
            var row = $('#tt').treegrid('getSelected');
            if (row) {
                $("#hiddenUpdateId").val(row.id);
                $("#updateUsernameId").textbox("setValue", row.username);
                $("#updateAgeId").textbox("setValue", row.age);
                $("#updateRealNameId").textbox("setValue", row.realName);
                $('#updateSexId').combobox("select", row.sex);
                $('#updateDialog').dialog('open');
            } else {
                $.messager.alert("提示", "请先选择需要修改的数据");
            }
        }
    });
</script>

<script sec:authorize="hasRole('SYS_USER_DELETE')">
    toolbar.push('-',{
        text: '删除',
        iconCls: 'icon-remove',
        handler: function () {
            var row = $('#tt').treegrid('getSelected');
            if (row) {
                $.messager.confirm('提示', '确定要删除这条记录吗?', function (res) {
                    if (res) {
                        $.post("/sys/user/deleteById", {id: row.id}, function (result) {
                            if (result == '1') {
                                console.log("success");
                                reloads();
                            } else {
                                $.messager.alert("提示", "删除错误");
                            }
                        });
                    }
                });
            } else {
                $.messager.alert("提示", "请先选中一条记录");
            }

        }
    });
</script>

<script sec:authorize="hasRole('SYS_USER_ENABLE_UPDATE')">
    toolbar.push('-',{
        text: '有效/无效',
        iconCls: 'icon-remove',
        handler: function () {
            var row = $('#tt').treegrid('getSelected');
            if (row) {
                var id = row.id;
                var enable = row.enable;
                var s = '有效';
                if (enable==1){
                    s='无效';
                    enable=0;
                } else{
                    enable=1;
                }
                $.messager.confirm('提示', '确定要将此用户置为'+s+'吗?', function (res) {
                    if (res) {
                        $.post("/sys/user/updateEnableById", {id: id,enable:enable}, function (result) {
                            if (result == '1') {
                                console.log("success");
                                reloads();
                            } else {
                                $.messager.alert("提示", "操作错误");
                            }
                        });
                    }
                });
            } else {
                $.messager.alert("提示", "请先选中一条记录");
            }

        }
    });
</script>

<script type="text/javascript">
    toolbar.push('-',{
        text:'刷新',
        iconCls:'icon-reload',
        handler:reloads
    });
    function reloads() {
        $('#tt').datagrid('reload');//刷新
    }
</script>


<div id="addDialog" class="easyui-dialog" title="新增数据" maximizable="true" resizable="true" style="width:80%;height:450px;width:800px;padding:10px"
     data-options="title:'新增数据',modal:true,closed:true">
    <div style="margin-bottom:20px">
        <input id="addUsernameId" class="easyui-textbox" name="username" style="width:100%" data-options="label:'用户名:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <input id="addAgeId" class="easyui-textbox" name="age" type="number" style="width:100%" data-options="label:'年龄:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <select id="addSexId" class="easyui-combobox" name="sex" label="性别" style="width:30%">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
    </div>
    <div style="margin-bottom:20px">
        <input id="addRealNameId" class="easyui-textbox" name="realName" style="width:100%" data-options="label:'真实姓名:',required:true">
    </div>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('addDialog')" style="width:80px">取消</a>
    </div>
</div>
<script>
    function cancelForm(id) {
        $('#' + id).dialog('close');
    }

    function submitForm() {
        var username = $("#addUsernameId").val();
        var age = $("#addAgeId").val();
        var sex = $("#addSexId").val();
        var realName = $("#addRealNameId").val();
        $.post("/sys/user/insert", {username: username, age: age, sex: sex, realName: realName}, function (result) {
            $('#addDialog').dialog('close');
            if (result == '1') {
                console.log("success");
                reloads();
            } else {
                $.messager.alert("提示", "操作失败");
            }
        });
    }
</script>


<div id="updateDialog" class="easyui-dialog" title="编辑数据" maximizable="true" resizable="true"
     style="width:80%;height:450px;width:800px;padding:10px" data-options="title:'编辑数据',modal:true,closed:true">
    <input type="hidden" id="hiddenUpdateId"/>
    <div style="margin-bottom:20px">
        <input id="updateUsernameId" class="easyui-textbox" name="username" style="width:100%" data-options="label:'用户名:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <input id="updateAgeId" class="easyui-textbox" name="age" type="number" style="width:100%" data-options="label:'年龄:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <select id="updateSexId" class="easyui-combobox" name="sex" label="性别" style="width:30%">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
    </div>
    <div style="margin-bottom:20px">
        <input id="updateRealNameId" class="easyui-textbox" name="realName" style="width:100%" data-options="label:'真实姓名:',required:true">
    </div>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpdateForm()" style="width:80px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('updateDialog')" style="width:80px">取消</a>
    </div>
</div>
<script>
    function submitUpdateForm() {
        var updateId = $("#hiddenUpdateId").val();
        var username = $("#updateUsernameId").val();
        var age = $("#updateAgeId").val();
        var sex = $("#updateSexId").val();
        var realName = $("#updateRealNameId").val();
        $.post("/sys/user/update", {id: updateId, username: username, age: age, sex: sex, realName: realName}, function (result) {
            $('#updateDialog').dialog('close');
            if (result == '1') {
                console.log("success");
                reloads();
            } else {
                $.messager.alert("提示", "操作失败");
            }
        });
    }
</script>


<div id="roleUpdateDialog" class="easyui-dialog" title="分配角色" maximizable="true" resizable="true"
     style="width:50%;height:450px;width:800px;padding:10px" data-options="title:'分配角色',modal:true,closed:true">
    <input type="hidden" id="hiddenUserUpdateId"/>
    <div style="margin-bottom:20px">
        <input id="userRoleSelect" class="easyui-combobox" name="languages" style="width:70%;" data-options="
                    url:'/sys/role/userRoles',
                    method:'post',
                    valueField:'id',
                    textField:'text',
                    multiple:true,
                    panelHeight:'auto',
                    label: '角色列表:',
                    labelPosition: 'top'
                    ">
    </div>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitRoleUpdateForm()"
           style="width:80px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('roleUpdateDialog')"
           style="width:80px">取消</a>
    </div>
</div>

<script>
    function submitRoleUpdateForm() {
        var values = $('#userRoleSelect').combobox('getValues');
        if (values === ''||values==null||values==undefined) {
            $.messager.alert("提示", "至少选择一个角色");
        }else{
            var userId = $("#hiddenUserUpdateId").val();
            $.post("/sys/user/updateUserRole", {userId:userId,roleIds:values.toString()}, function (result) {
                if (result == '1') {
                    console.log("success");
                    cancelForm('roleUpdateDialog');
                    reloads();
                } else {
                    $.messager.alert("提示", "操作错误");
                }
            });
        }
    }

    function getChecked() {
        var nodes = $('#menuTree').tree('getChecked', ['checked', 'indeterminate']);
        var s = '';
        for (var i = 0; i < nodes.length; i++) {
            if (s != '') s += ',';
            s += nodes[i].id;
        }
        return s;
    }
</script>
</body>
</html>